<template>
  <div>
    <p>子组件:</p>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
    <!-- <h3>这是作用域插槽子组件</h3> -->
    <!-- <slot :data="message"></slot> -->
    <div>props.fatherText {{ props.fatherText }}</div>
    <div>sonReceiveText -- watch{{ sonReceiveText }}</div>
    <div>fatherText -- inject{{ fatherText }}</div>
    <div>
      给父组件传过去<el-input
        style="width: 200px"
        @input="emitToFather"
        v-model="SonText"
      ></el-input>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, inject, watch } from "vue";
export default defineComponent({
  name: "Son",
  props: {
    fatherText: {
      type: String,
      //   default: "",
    },
    count: {
      type: Number,
      default: 0,
    },
    modelModifiers: {
      type: Object,
      default: () => ({}),
    },
  },
  setup(props, context) {
    const { attrs } = context;
    console.log("attrs", attrs);

    const sonReceiveText = ref("");
    sonReceiveText.value = props.fatherText as string;

    watch(props, (newValue) => {
      sonReceiveText.value = newValue.fatherText as string;
    });

    const fatherText = inject("fatherText");

    const SonText = ref("子组件内容");
    const emitToFather = () => {
      context.emit("sonProvideMessage", SonText);
    };
    const message = ref("这是从子组件传递的数据");
    return {
      sonReceiveText,
      fatherText,
      emitToFather,
      SonText,
      props,
      message,
    };
  },
});
</script>
